<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 轮播（Carousel）插件方法</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
	<!-- 轮播（Carousel）指标 -->
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>   

	<!-- 轮播（Carousel）项目 -->
	<div class="carousel-inner">
		<div class="item active">
		<img src="http://www.runoob.com/wp-content/uploads/2014/07/slide1.png" alt="First slide">
		</div>
		<div class="item">
		<img src="http://www.runoob.com/wp-content/uploads/2014/07/slide1.png" alt="Second slide">
		</div>
		<div class="item">
		<img src="http://www.runoob.com/wp-content/uploads/2014/07/slide1.png" alt="Third slide">
		</div>
	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	    <span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	</a>
</div>

<!-- 控制按钮 -->

<div style="text-align:center;">
	<input type="button" class="btn start-slide" value="Start">
	<input type="button" class="btn pause-slide" value="Pause">
	<input type="button" class="btn prev-slide" value="Previous Slide">
	<input type="button" class="btn next-slide" value="Next Slide">
	<input type="button" class="btn slide-one" value="Slide 1">
	<input type="button" class="btn slide-two" value="Slide 2">
	<input type="button" class="btn slide-three" value="Slide 3">
</div>
<script>
	$(function(){
		// 初始化轮播
		$(".start-slide").click(function(){
			$("#myCarousel").carousel({
			    interval: 2000
			});
		});
		// 停止轮播
		$(".pause-slide").click(function(){
			$("#myCarousel").carousel('pause');
		});
		// 循环轮播到上一个项目
		$(".prev-slide").click(function(){
			$("#myCarousel").carousel('prev');
		});
		// 循环轮播到下一个项目
		$(".next-slide").click(function(){
			$("#myCarousel").carousel('next');
		});
		// 循环轮播到某个特定的帧 
		$(".slide-one").click(function(){
			$("#myCarousel").carousel(0);
		});
		$(".slide-two").click(function(){
			$("#myCarousel").carousel(1);
		});
		$(".slide-three").click(function(){
			$("#myCarousel").carousel(2);
		});
	});
</script>
</body>
</html>